<template>
  <div class="hover-flow-border" :style="borderStyles">
    <slot></slot>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 光效颜色（建议使用浅色）
  lightColor: {
    type: String,
    default: 'rgba(255,255,255,0.8)'
  },
  // 光效宽度（百分比）
  lightWidth: {
    type: Number,
    default: 30
  },
  // 动画时长（毫秒）
  duration: {
    type: Number,
    default: 1500
  }
})

const borderStyles = computed(() => ({
  '--light-color': props.lightColor,
  '--light-width': `${props.lightWidth}%`,
  '--duration': `${props.duration}ms`
}))
</script>

<style scoped>
.hover-flow-border {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

/* 光效层 */
.hover-flow-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--light-color) 20%,
    var(--light-color) 80%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-120%) skew(-20deg);
  transition: opacity 0.3s;
  z-index: 2;
}

/* 底色层 */
.hover-flow-border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    #e0f2fe,  
    #f0fdf4, 
    #f5f3ff 
  );
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}

.hover-flow-border:hover::before {
  opacity: 1;
  animation: lightFlow var(--duration) ease-out;
}

.hover-flow-border:hover::after {
  opacity: 0.8;
}

@keyframes lightFlow {
  0% {
    transform: translateX(-120%) skew(-15deg);
  }
  70% {
    transform: translateX(120%) skew(-15deg);
    opacity: 0.6;
  }
  100% {
    transform: translateX(120%) skew(-15deg);
    opacity: 0;
  }
}

/* 内容容器 */
.hover-flow-border > :slotted(*) {
  position: relative;
  z-index: 3;
  background: white;
  margin: 2px;
  border-radius: 6px;
}
</style>